<template>
    <el-select class="config-select"
               :value="value?value.name:undefined"
               @input="handleInput"
               size="mini"
               popper-class="option">
        <el-option
                v-for="config in configs"
                :key="config.name"
                :label="config.name"
                :value="config.name">
            <div class="select-label">
                <span v-text="config.name"></span>
                <div>
                    <el-button type="text" icon="el-icon-edit-outline" @click="editClick(config.name)"></el-button>
                    <el-button type="text" icon="el-icon-delete" @click="deleteClick(config.name)"></el-button>
                </div>
            </div>
            <p class="select-value">
                <span>HOST:</span> <span v-text="config.host"></span>
            </p>
        </el-option>

        <el-option value="" style="text-align: center">
            <el-button type="text" size="mini" @click="addClick">新增配置</el-button>
        </el-option>

        <template>
            <config-dialog
                    v-if="dialog.visible"
                    v-model="dialog.visible"
                    :type="dialog.type"
                    :config-name="dialog.configName"
                    @submit="loadConfigs">
            </config-dialog>
        </template>
    </el-select>
</template>

<script type="text/ecmascript-6">
  import ConfigDialog from "./ConfigDialog";
  import R from "../../../res/R";
  import { local } from "../../../utils/js/storage";
  import { MODEL } from "../../../res/config-key";

  /**
   * @author 白雨浓
   * @date 2019/7/7 12:02
   *
   * 配置 选择
   **/
  export default {
    name: 'ConfigSelect',
    components: {ConfigDialog},
    props: ['value'],
    data() {
      return {
        dialog: {
          visible: false,
          type: null,
          configName: null,
        },
        configs: [],
      }
    },
    created() {
      this.loadConfigs();

      if (!this.value) {
        const lastConfigName = local.getItem(MODEL.LAST_CONFIG);

        if (lastConfigName && this.configs.length) {
          this.handleInput(lastConfigName);
        }
      }
    },
    methods: {
      loadConfigs() {
        const configs = local.getItem(MODEL.CONFIG);

        if (configs) {
          this.configs = configs;
        }
      },
      addClick() {
        this.dialog = {
          visible: true,
          type: R.dialog.ADD,
        };
      },
      editClick(name) {
        this.dialog = {
          visible: true,
          type: R.dialog.EDIT,
          configName: name,
        };
      },
      async deleteClick(name) {
        await this.$confirm('是否删除该配置?', '提示', {type: 'warning'});

        const index = this.configs.findIndex(item => item.name === name);
        this.configs.splice(index, 1);
        local.setItem(MODEL.CONFIG, this.configs);
      },
      handleInput(name) {
        const config = this.configs.find(item => item.name === name);

        if (config) {
          this.$emit('input', config);
          this.$emit('select', config);
          local.setItem(MODEL.LAST_CONFIG, config.name);
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .config-select {
        display inline-block
        margin 0 10px
    }

    .option {
        li {
            height auto
        }
    }

    .select-label {
        display flex
        justify-content space-between
        align-items center
    }

    .select-value {
        float right
        color #8492a6
        font-size 13px
    }
</style>
